<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item
      :name="index"
      v-for="(item, index) in tableData"
      :key="index"
    >
      <template slot="title">
        <el-checkbox
          v-model="item.checked"
          @change="handleCheckAllChange(item)"
          :disabled="isWatchSelected"
        ></el-checkbox>
        <div class="title-line"></div>
        <div>申请企业：{{ item.applicant }}</div>
        <div class="title-line"></div>
        <div>授权来源：{{ item.source }}</div>
        <div v-if="isWatchSelected == false" class="title-line"></div>
        <div v-if="isWatchSelected == false">提交时间：{{ item.time }}</div>
        <div class="title-line"></div>
        <div>
          授权材料：<el-button type="text">{{ item.material }}</el-button>
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          :content="reviewTopTip[item.reviewStatus]"
          placement="top"
        >
          <img
            v-if="isWatchSelected == false"
            class="title-img"
            :src="reviewColor[item.reviewStatus]"
            alt=""
          />
        </el-tooltip>
      </template>
      <div
        v-for="(item2, index2) in item.detailData"
        :key="index2"
        class="content-style"
      >
        <el-checkbox
          :disabled="isWatchSelected"
          v-model="item2.checkStatus"
          @change="handleCheckOneChange(item2, item)"
        ></el-checkbox>
        <div class="content-line"></div>
        <div>{{ index2 + 1 }}</div>
        <div class="content-line"></div>
        <div>
          申请号：
          <div>{{ item2.number }}</div>
        </div>
        <div class="content-line"></div>
        <div>
          专利名称：
          <div>{{ item2.name }}</div>
        </div>
        <div v-if="isWatchSelected == false" class="content-line"></div>
        <div v-if="isWatchSelected == false">
          审核状态：
          <div :class="reviewStyle[item2.status]">
            {{ reviewStatus[item2.status] }}
          </div>
        </div>
        <div class="content-line"></div>
        <div><el-button type="text">详情</el-button></div>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
      >
      </el-pagination>
    </el-collapse-item>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </el-collapse>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
    },
    isWatchSelected: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeNames: [],
      selectedInfomation: [],
      currentPage1: 5,
      currentPage4: 4,
      reviewStatus: {
        1: "审核中",
        2: "审核通过",
      },
      reviewStyle: {
        1: "review-yellow",
        2: "review-green",
      },
			reviewTopTip:{
				0:'列表全部未审核',
				1:'列表全部已审核',
				2:'列表部分未审核',
			},
      reviewColor: {
        0: require("../../assets/patentReview/red.png"),
        1: require("../../assets/patentReview/green.png"),
        2: require("../../assets/patentReview/orange.png"),
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleChange(val) {
      console.log(val);
    },
    // 计算已选信息
    handleSelectedInfo() {
      this.selectedInfomation = [];
      this.tableData.forEach((item) => {
        let itemcopy = JSON.parse(JSON.stringify(item));
        if (item.checked == true) {
          this.selectedInfomation.push(item);
        } else {
          let newDetailData = item.detailData.filter(function (itemchild) {
            return itemchild.checkStatus == true;
          });
          itemcopy.detailData = newDetailData;
          if (newDetailData.length >= 1) {
            this.selectedInfomation.push(itemcopy);
          }
        }
      });
      this.$emit("passSelectedInfo", this.selectedInfomation);
      console.log("测试999999", this.selectedInfomation);
    },
    // 全选按钮
    handleCheckAllChange(data) {
      console.log(data);
      if (data.checked == true) {
        data.detailData.map((item) => {
          item.checkStatus = true;
        });
      } else {
        data.detailData.map((item) => {
          item.checkStatus = false;
        });
      }
      this.handleSelectedInfo();
    },
    // 单选按钮
    handleCheckOneChange(data2, data) {
      console.log(data2, data);
      let newarr = data.detailData.filter(function (item) {
        return item.checkStatus == true;
      });
      console.log("ceshi111111", newarr);
      if (newarr.length == data.detailData.length) {
        data.checked = true;
      } else {
        data.checked = false;
      }

      this.handleSelectedInfo();
    },
  },
};
</script>

<style>
.content-style {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px 0 60px;
  height: 64px;
  background: #ffffff;
  box-shadow: inset 0px -1px 0px 0px #eaeaea;
}
.content-line {
  width: 1px;
  height: 44px;
  background: rgba(0, 0, 0, 0.08);
}
.title-line {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.08);
}
.title-img {
  width: 16px;
  height: 16px;
}
.review-yellow {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ff9d07;
  line-height: 20px;
}
.review-green {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0ae94d;
  line-height: 20px;
}
</style>
